<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="grid-content">
        <div class="content">
          <div class="icon" />
          <div class="rightInfo">
            <div class="title">
              嘻嘻嘻项目
            </div>
            <div class="desc">
              我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content">
        <div class="content">
          <div class="icon" />
          <div class="rightInfo">
            <div class="title">
              嘻嘻嘻项目
            </div>
            <div class="desc">
              我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content">
        <div class="content">
          <div class="icon" />
          <div class="rightInfo">
            <div class="title">
              嘻嘻嘻项目
            </div>
            <div class="desc">
              我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述我是很长很长的描述
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.grid-content {
  width: 100%;
  height: 115px;
  --tw-border-opacity: 1;
  --tw-shadow: 0 0 #0000;
  background-color: #fff;
  border-color: rgba(229, 231, 235, 1);
  border-radius: 0.375rem;
  border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
  box-shadow:
    0 0 #0000,
    0 0 #0000,
    0 0 #0000;
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  padding: 1rem;
  position: relative;
  transition-duration: 0.15s;
  transition-duration: 0.2s;
  transition-property:
    background-color,
    border-color,
    color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    -webkit-backdrop-filter;
  transition-property:
    background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property:
    background-color,
    border-color,
    color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter,
    -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  &:hover {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
    border-color: rgba(209, 213, 219, var(--tw-border-opacity));
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    .icon {
      --tw-border-opacity: 1;
      background-position: 50%;
      background-size: cover;
      border-color: rgba(209, 213, 219, var(--tw-border-opacity));
      border-radius: 0.375rem;
      border-width: 1px;
      display: flex;
      flex-grow: 0;
      flex-shrink: 0;
      height: 5rem;
      width: 5rem;
      background-image:
        url(https://source.roboflow.com/ssY3Lkflk1U2zmtZ6KdPDppHsQE3/ZZeQHLE4Exhk60atT3rV/annotation-objects.png),
        url(https://source.roboflow.com/ssY3Lkflk1U2zmtZ6KdPDppHsQE3/ZZeQHLE4Exhk60atT3rV/thumb.jpg);
    }
    .rightInfo {
      padding-left: 8px;
      .title {
        --tw-text-opacity: 1;
        color: rgba(17, 24, 39, var(--tw-text-opacity));
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
        line-height: 1.5rem;
      }
      .desc {
        font-size: 14px;
        display: -webkit-box; /* 启用弹性盒模型（WebKit 内核） */
        -webkit-box-orient: vertical; /* 垂直排列子元素（即按行排列） */
        -webkit-line-clamp: 3; /* 限制显示的最大行数 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 显示省略号（需结合 overflow:hidden） */
      }
    }
  }
}
</style>
